import { Table, ConfigProvider } from 'antd'
import { ColumnsType } from 'antd/es/table'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import './locales/i18n'

// 导入antd中的语言包
import zhCn from 'antd/locale/zh_CN';
import enUS from 'antd/locale/en_US';
export default function App() {
    let { t, i18n } = useTranslation(['app'])
    let [langState, setLangState] = useState(true)
    const columns: ColumnsType<any> = [
        {
            title: t('index')
        },
        {
            title: t('name')
        },
        {
            title: t('age')
        }
    ]
    return (
        <div>
            <h3>自定义文字切换语言</h3>
            <div>hello: {t('hello')}</div>
            <p><button onClick={() => {
                i18n.changeLanguage('zh')
            }}>中文</button></p>
            <p><button onClick={() => {
                i18n.changeLanguage('en')
            }}>英文</button></p>


            <h3>Antd 组件中的文字切换</h3>
            <p >
                <button onClick={() => {
                    if(langState){ // 中 --> 英文
                        i18n.changeLanguage('en')
                    }else{ // 英文-->中文
                        i18n.changeLanguage('zh')
                    }
                    setLangState(!langState)
                }}>{langState ? '英文' : '中文'}</button>
            </p>
            <ConfigProvider locale={langState ? zhCn : enUS}>
                <Table
                    columns={columns}
                    pagination={{
                        current: 1,
                        pageSize: 5,
                        total: 10,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: [5, 10, 15]
                    }}
                />
            </ConfigProvider>
        </div>
    )
}
